<template>
  <div class="overview-content">
    <!---->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper ">
            <div class="divUl">
                 <div class="titleDiv">
                     Lot 7510, 3031 The Boulevard, Carrara, QLD 421
                     <span>交接中 [闲置房源]</span>
                 </div>
                 <div class="flex-row  jus two">
                     <p class="countFsColor" @click="goBack">返回</p>
                     <p class="countFsColor" @click="goBack">中止流程</p>
                 </div>
                 <div class="inputTop">
                        <varcla-tab  :tableData="arr" :active="active" />
                                  <!---->
                                  <div class="formdiv">
                                    <!---->
                                      <table-form :obj="obj" v-if="active == 0" v v-on:showDigo="showDigo">
                                        <template slot="title">               
                                            <h2 class="fromDivTit">待提供钥匙联系人</h2>
                                        </template>
                                          <!---->                                    
                                              <el-form-item label="联系人姓名:" :required="true">
                                                  <el-input
                                                      type="text"
                                                      placeholder="请输入内容"
                                                      v-model="textarea"
                                                      >
                                                      </el-input>
                                              </el-form-item>
                                              <el-form-item label="联系人电话:" :required="true">
                                                      <el-input
                                                      type="text"
                                                      placeholder="请输入内容"
                                                      v-model="textarea"
                                                      >
                                                      </el-input>
                                              </el-form-item>
                                              <el-form-item label="联系人邮箱:" :required="true">
                                                      <el-input
                                                      type="text"
                                                      placeholder="请输入内容"
                                                      v-model="textarea"
                                                      >
                                                      </el-input> 
                                              </el-form-item>
                                              <el-form-item label="备注:" :required="true">
                                                      <el-input
                                                          type="textarea"
                                                          :rows="2"
                                                          placeholder="请输入内容"
                                                          v-model="textarea">
                                                          </el-input>
                                              </el-form-item>
                                            <p style="margin-left:110px;color:#bdbdbd;font-size:12px">提示：在跳到下一步前请BD确认好业主也发送了终止信。</p>
                                      </table-form>    
                                    <!---->
                                       <table-form :obj="obj" v-if="active == 1" v v-on:showDigo="showDigo">
                                          <!---->     
                                        <template slot="title">               
                                            <h2 class="fromDivTit">请填写交接日期</h2>
                                        </template>                               
                                              <el-form-item label="交接日期:"  label-width="120px" :required="true">
                                                <el-date-picker v-model="sizeForm.date1" type="date" placeholder="请输入" style="width: 100%;" />
                                              </el-form-item>
                                              <el-form-item label="备注:"  label-width="120px">
                                                      <el-input
                                                          type="textarea"
                                                          :rows="2"
                                                          placeholder="请输入内容"
                                                          v-model="textarea">
                                                          </el-input>
                                              </el-form-item>
                                      </table-form>
                                    <!---->
                                    <!---->
                                       <table-form :obj="obj" v-if="active == 2" v v-on:showDigo="showDigo">  
                                              <template slot="title">               
                                                  <h2 class="fromDivTit">请填写交接信息</h2>
                                              </template>       
                                              <el-form-item label="交接清单:" label-width="120px" :required="true">
                                                  <el-checkbox-group v-model="checkList">
                                                    <el-checkbox label="租金对账单"></el-checkbox>
                                                    <el-checkbox label="押金单"></el-checkbox>
                                                    <el-checkbox label="租客申请表"></el-checkbox>
                                                    <el-checkbox label="租客工作和个人电话"></el-checkbox>
                                                    <el-checkbox label="例行检查报告"></el-checkbox>
                                                    <el-checkbox label="入住检查报告"></el-checkbox>
                                                    <el-checkbox label="房屋的照片"></el-checkbox>
                                                    <el-checkbox label="钥匙"></el-checkbox>
                                                    <el-checkbox label="保险资料"></el-checkbox>
                                                    <el-checkbox label="物业公司信息"></el-checkbox>
                                                    <el-checkbox label="未支付的账单"></el-checkbox>
                                                    <el-checkbox label="家电设备保修手册"></el-checkbox>
                                                    <el-checkbox label="车位/储物间号码"></el-checkbox>
                                                    <el-checkbox label="租约"></el-checkbox>
                                                    <el-checkbox label="目前租金及最后一次支付时间"></el-checkbox>
                                                  </el-checkbox-group>
                                              </el-form-item>                           
                                              <el-form-item label="交接资料:"  label-width="120px" :required="true">
                                                                  <el-upload
                                                      class="upload-demo"
                                                      action="https://jsonplaceholder.typicode.com/posts/"
                                                      :on-preview="handlePreview"
                                                      :on-remove="handleRemove"
                                                      :before-remove="beforeRemove"
                                                      multiple
                                                      :limit="3"
                                                      :on-exceed="handleExceed"
                                                      :file-list="fileList">
                                                      <el-button size="small" type="primary">点击上传</el-button>
                                                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                    </el-upload>
                                              </el-form-item>
                                              <el-form-item label="交接说明:"  label-width="120px">
                                                      <el-input
                                                          type="textarea"
                                                          :rows="2"
                                                          placeholder="请输入内容"
                                                          v-model="textarea">
                                                          </el-input>
                                              </el-form-item>
                                              <p style="margin-left:110px;color:#bdbdbd;font-size:12px">交接日期：2020-11-23</p>
                                      </table-form>
                                    <!---->
                                    <!---->
                                       <table-form :obj="obj" v-if="active == 3" v v-on:showDigo="showDigo">                                   
                                              <template slot="title">               
                                                  <h2 class="fromDivTit">请填写验房日期</h2>
                                              </template>  
                                             <el-form-item label="验房日期:"  label-width="120px" :required="true">
                                                <el-date-picker v-model="sizeForm.date1" type="date" placeholder="请输入" style="width: 100%;" />
                                              </el-form-item>
                                              <el-form-item label="备注:"  label-width="120px">
                                                     <el-input
                                                          type="textarea"
                                                          :rows="2"
                                                          placeholder="请输入内容"
                                                          v-model="textarea">
                                                          </el-input>
                                              </el-form-item>
                                      </table-form>
                                    <!---->
                                                                        <!---->
                                       <table-form :obj="obj" v-if="active == 4" v v-on:showDigo="showDigo">                                   
                                              <template slot="title">               
                                                  <h2 class="fromDivTit">请上传验房结果</h2>
                                              </template>  
                                             <el-form-item label="验房日期:"  label-width="120px" :required="true">
                                                  <el-upload
                                                      class="upload-demo"
                                                      action="https://jsonplaceholder.typicode.com/posts/"
                                                      :on-preview="handlePreview"
                                                      :on-remove="handleRemove"
                                                      :before-remove="beforeRemove"
                                                      multiple
                                                      :limit="3"
                                                      :on-exceed="handleExceed"
                                                      :file-list="fileList">
                                                      <el-button size="small" type="primary">点击上传</el-button>
                                                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                                    </el-upload>
                                              </el-form-item>
                                              <el-form-item label="验房说明:"  label-width="120px">
                                                     <el-input
                                                          type="textarea"
                                                          :rows="2"
                                                          placeholder="请输入内容"
                                                          v-model="textarea">
                                                          </el-input>
                                              </el-form-item>
                                              <p style="margin-left:110px;color:#bdbdbd;font-size:12px">验房时间：2020-11-23</p>
                                      </table-form>
                                    <!---->
                                                                        <!---->
                                      <table-form :obj="obj" v-if="active == 5" v v-on:showDigo="showDigo">       
                                              <template slot="title"> 
                                                  <h2 class="fromDivTit">交接完成</h2>
                                              </template>                                                                     
                                              <h3  class="text-center">恭喜你！房产已成功交接！</h3>
                                              <p class="text-center p1">交接从 2020/09/18 至 2020/12/10 ，共耗时 83 天！</p>
                                              <br>
                                              <br> 
                                              <span style="display:block"  class="text-center">你现在可以到
                                                <i @click="nextList" class="countFsColor">房产列表</i>
                                                中去出租或出售了</span>
                                                  <br>
                                              <br> 
                                              <template slot="footer">
                                                <div class="dialog-footer">
                                                 <el-button type="primary" @click="nextList" >返回列表</el-button>
                                                </div>
                                              </template>
                                      </table-form>
                                    <!---->
                                  </div>
                                  <!---->
                 </div>
            </div>    
        </div>
      </el-col>
    </el-row>
    <!---->
           <!---->
          <myModal :obj="objFour" v-on:close='close' v-on:save='save'>
              <div class="mpdalBody">
                                <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="textarea"
                    maxlength="200"
                    show-word-limit
                    >
                    </el-input>
              </div>
          </myModal>
          <!---->
    <!---->
  </div>
</template>

<script>
import VarclaTab from './varclaTab.vue'
import TableForm from './tableForm.vue'
import myModal  from '@/components/Modal'
export default {
  components: {
    VarclaTab,
    TableForm,
    myModal
  },
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      active: 0,
      show:false,
      textarea: '',
      checkList: ['1','2'],
      arr:[
        {id:0,name:'待提供钥匙联系人'},
        {id:1,name:'待确认交接日期'},
        {id:2,name:'待上传交接清单'},
        {id:3,name:'待确认验房时间'},
        {id:4,name:'待上传验房结果'},
        {id:5,name:'交接完成'},
      ],
      sizeForm:{},
      obj:{
      },
      objFour:{
        show:false,
        title:'请填写跳过理由',
        width:'647px'
      }
    }
  },
  methods: {
    save(){
        this.objFour.show = false
    },
    close(){
        this.objFour.show = false
    },
    nextList(){
      this.$router.push({ path: 'page' })
    },
    goBack(){
     this.$router.go(-1);
    },
    showDigo(val){
      if(val){
        this.objFour.show = val
        return
      }
       this.active = this.active * 1 + 1
    },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
  }
}
</script>

<style lang="scss" scoped>
.myBnt{color: #5AC6B7;display: block;width: 100px;margin-left: 115px;margin-bottom: 20px;border: 0;}
.divUl{margin: 0px auto 0 auto;}
h5,p{padding: 0;margin: 0;}
.ulMy{flex-wrap: wrap;width: 166px;padding-left: 10px;}
.ulMy li{width: 100%;display: flex;align-items: center;margin-bottom: 15px;height: 40px;line-height: 40px;}
.ulMy li i{color: #6a6a6a;font-size: 13px;align-self: self-start;margin-top: 23px;}
.ulMy li p{color: #6a6a6a;font-size: 13px;}
.ulMy li h5{font-size: 16px;color: #151515;margin-bottom: 10px;}
.ulMy li div{background: #fff;margin-left: 0px;flex: 1;padding: 0px;box-sizing: border-box;border-radius: 2px;text-align: center;font-size: 12px;}
.ulMy li em{color: #5AC6B7;margin-left: 3px;}
.ulMy li dfn{color: #5AC6B7;margin-top: 3px;font-size: 12px;display: block;margin-top: 10px;}
.ulMy li.not{color: #ccc;}
.ulMy li.not h5{font-size: 16px;color: #ccc;margin-bottom: 10px;}
.ulMy li.not div{background: #fff;margin-left: 0px;flex: 1;padding: 0px;box-sizing: border-box;border-radius: 2px;}
.ulMy li.not p{color: #ccc;}
.overview-content{min-height: calc(100vh - 160px);background: #eee;}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.formDiv{padding-left: 39px;padding-right: 39px;background: #fff;}
.divSE{text-align: center;}
.divSE em{display: block;}
.fileWD{font-size: 46px;color: #5AC6B7;}
.titleDiv{background: #5AC6B7;padding-left: 20px;color: #fff;height: 60px;line-height: 60px;}
.two{margin: 10px 0;font-size: 13px;padding-left: 10px;padding-right: 10px;}
.overview-tabs{background: #6a6a6a!important;}
.inputTop{display: flex;justify-content: space-between;}
.el-upload__tip{display: inline-block;}
.formdiv{width:calc(100% - 200px);}
.p1{font-size: 12px;color: #d0d0d0;}
::v-deep .el-checkbox{width: 190px;}
</style>

